<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="title + '供应商'"
      :width="modalWidth"
      @cancel="handleClose"
      :destroyOnClose="true"
      @ok="onSubmit"
      :visible="visible"
      :confirmLoading="confirmLoading"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleClose">
            取消
          </a-button>
          <a-button @click="onSubmit" type="primary">确认</a-button>
        </div>
      </template>
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="ruleForm" :model="model" :rules="rules">
          <a-row>
            <a-col :span="21">
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="供应商编号"
                    prop="serialNumber"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入供应商编号"
                      v-model.trim="model.serialNumber"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="业务员"
                    prop="salemanId"
                    hasFeedback
                  >
                    <a-select
                      :disabled="disabled"
                      :open="false"
                      :defaultOpen="false"
                      mode="multiple"
                      :allowClear="true"
                      placeholder="业务员"
                      v-model.trim="model.salemanId"
                      @dropdownVisibleChange="handlePerson"
                      @change="handlePersonChange"
                    >
                      <a-select-option
                        v-for="item in tableUserOption"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="供应商名称"
                    prop="name"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入供应商名称"
                      v-model.trim="model.name"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    label="是否是客户"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="isCustomer"
                  >
                    <a-radio-group v-model.trim="model.isCustomer">
                      <a-radio :value="1">
                        是
                      </a-radio>
                      <a-radio :value="0">
                        否
                      </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    label="默认开票"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="defaultMakeInvoice"
                  >
                    <a-radio-group v-model.trim="model.defaultMakeInvoice">
                      <a-radio :value="1">
                        是
                      </a-radio>
                      <a-radio :value="0">
                        否
                      </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    label="是否供应商"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="isSupplier"
                  >
                    <a-radio-group v-model.trim="model.isSupplier">
                      <a-radio :value="1">
                        是
                      </a-radio>
                      <a-radio :value="0">
                        否
                      </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    label="供应商状态"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="supplierStatus"
                    hasFeedback
                  >
                    <a-select
                      v-model.trim="model.supplierStatus"
                      placeholder="请选择类型"
                    >
                      <a-select-option
                        v-for="item in supplierOption"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.dictName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="供应商类型"
                    hasFeedback
                  >
                    <a-tree-select
                      v-model.trim="model.suplierTypeId"
                      style="width: 100%"
                      :dropdown-style="{
                        maxHeight: '400px',
                        overflow: 'auto',
                      }"
                      :tree-data="treeData"
                      :replaceFields="replaceFields"
                      placeholder="请选择供应商类型"
                      tree-default-expand-all
                    ></a-tree-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    label="企业性质"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="enterpriseNature"
                    hasFeedback
                  >
                    <a-select
                      v-model.trim="model.enterpriseNature"
                      placeholder="请选择类型"
                    >
                      <a-select-option
                        v-for="item in enterpriOption"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.dictName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    label="供应商等级"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="supplierLevel"
                    hasFeedback
                  >
                    <a-select
                      v-model.trim="model.supplierLevel"
                      placeholder="请选择类型"
                    >
                      <a-select-option
                        v-for="item in supplierlevelOption"
                        :key="item.id"
                        :value="item.id"
                      >
                        {{ item.dictName }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    label="创建日期"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    placeholder="请选择开始时间"
                    required
                    prop="createDate"
                    hasFeedback
                  >
                    <a-date-picker
                      :showToday="false"
                      placeholder="请选择开始时间"
                      v-model.trim="model.createDate"
                      @change="changeCreateDate"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="品牌"
                    prop="brand"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入品牌"
                      v-model.trim="model.brand"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="21">
              <a-row :gutter="24">
                <a-col :span="8"> </a-col>
                <a-col :span="8"> </a-col>
                <a-col :span="8"> </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="开户名称"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入开户名称"
                      v-model.trim="model.accountName"
                    /> </a-form-model-item
                ></a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="联系人"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入联系人"
                      v-model.trim="model.contact"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="联系电话"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入联系电话"
                      v-model.trim="model.contactPhone"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="银行账户"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入银行账户"
                      v-model.trim="model.bank"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    label="结算币种"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="settlementCurrency"
                  >
                    <a-input
                      v-model.trim="model.settlementCurrency"
                      placeholder="请输入结算币种"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="地址"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入地址"
                      v-model.trim="model.address"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="公司电话"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入公司电话"
                      v-model.trim="model.companyPhone"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="税号"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入税号"
                      v-model.trim="model.ein"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="电子邮箱"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入公司网址"
                      v-model.trim="model.email"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="公司网址"
                    hasFeedback
                  >
                    <a-input
                      placeholder="请输入公司网址"
                      v-model.trim="model.comWebSite"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
      <table-Modal
        ref="tableForm"
        :columns="user"
        :tableKey="userTableKey"
        :treeKey="userTreeKey"
        @tableSelect="tableSelectUser"
        :replaceFields="userReplaceFields"
        :searchKey="userSearchKey"
        :name="userName"
        :filename="userFilename"
      ></table-Modal>
    </a-modal>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import { user } from "@/unit/tableUser.js";
import TableModal from "@/components/TableSelectModal";
export default {
  props: {
    treeData: {
      type: Array,
    },
    disabled: {
      type: Boolean,
    },
  },
  components: { TableModal },
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      modalWidth: 652, // 抽屉宽度
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元
      上级部门: "角色名称",
      menuLabel: "菜单名称",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      supplierOption: [],
      enterpriOption: [],
      supplierlevelOption: [],
      tableUserOption: [],
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
        value: "id",
      },
      user,
      userReplaceFields: {
        children: "childList",
        title: "departmentName",
        key: "id",
        value: "id",
      },
      userTreeKey: "DepartmentTree",
      userTableKey: "UserList",
      userSearchKey: "departmentId",
      userName: "name",
      userFilename: "UserModal",
    };
  },
  computed: {
    rules() {
      return {
        serialNumber: [{ required: true, message: "必填", trigger: "change" }],
        salemanId: [{ required: true, message: "必填", trigger: "change" }],
        isCustomer: [{ required: true, message: "必填", trigger: "change" }],
        isSupplier: [{ required: true, message: "必填", trigger: "change" }],
        defaultMakeInvoice: [
          { required: true, message: "必填", trigger: "change" },
        ],
        defaultRate: [{ required: true, message: "必填", trigger: "change" }],
        dutyParagraph: [{ required: true, message: "必填", trigger: "change" }],
        supplierStatus: [
          { required: true, message: "必填", trigger: "change" },
        ],
        enterpriseNature: [
          { required: true, message: "必填", trigger: "change" },
        ],
        createDate: [{ required: true, message: "必填", trigger: "change" }],
        supplierLevel: [{ required: true, message: "必填", trigger: "change" }],
        brand: [{ required: true, message: "请输入品牌!" }],
        suplierTypeId: [{ required: true, message: "必填", trigger: "change" }],
        name: [{ required: true, message: "必填", trigger: "change" }],
      };
    },
  },
  mounted() {},
  methods: {
    // 新增
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.getDictFindByCode("dict.supplierStatus", "supplier");
      this.getDictFindByCode("dict.enterprisenature", "enterpri");
      this.getDictFindByCode("dict.supplierlevel", "supplierlevel");
      if (record.id) {
        this.getUserAllList();
      }
      this.model = Object.assign({}, record);
    },
    // 获取数据来源
    async getDictFindByCode(parentCode, Key) {
      const res = await api.DictFindByCode({ parentCode });
      this[Key + "Option"] = res.data;
    },
    // 获取人员数据
    async getUserAllList() {
      let params = { pageNumber: 1, pageSize: 99999, deleteFlag: "N" };
      const res = await api.UserList(params);
      this.tableUserOption = res.data.data;
    },
    onChangeMenuType() {},
    onSubmit() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.handleSubmit();
        } else {
          return false;
        }
      });
    },
    // 时间格式化
    changeCreateDate(date, dateString) {
      this.model.createDate = dateString;
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    async handleSubmit() {
      let res;
      this.confirmLoading = true;
      res = await api.SupplierAdd(this.model);
      if (res.code && res.code !== 200) {
        this.$message.error(res.message);
        this.confirmLoading = false;
        return;
      }
      this.$message.success(res.message);
      this.confirmLoading = false;
      this.$emit("ok");
      this.visible = false;
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.modalWidth = screenWidth;
      } else {
        this.modalWidth = 1677;
      }
    },
    handlePerson() {
      this.$refs.tableForm.title = "人员";
      this.$refs.tableForm.modalAdd();
      if (this.model.salemanId) {
        let arr = this.model.salemanId.toString().split(",");
        if (arr.length > 0) {
          let newArr = arr.map((item) => {
            return Number(item);
          });
          this.$refs.tableForm.selectedRowKeys = newArr;
        } else {
          this.$refs.tableForm.selectedRowKeys = [];
        }
      }
    },
    handlePersonChange(value) {
      console.log(value);
      if (value.length > 0) {
        this.model.salemanId = value.toString();
      } else {
        delete this.model.salemanId;
      }
    },
    tableSelectUser(result, tableUserOption) {
      this.tableUserOption = tableUserOption;
      this.$set(this.model, "salemanId", result[0].id);
      this.$set(this.model, "saleman_name", result[0].name);
      this.$refs.ruleForm.clearValidate(["salemanId"]);
    },
  },
};
</script>

<style lang="less" scoped>
.formBox {
  width: 100%;
  border: 1px solid #e9e9e9;
  padding: 10px 16px;
  margin: 18px 0;
  .requiredNews {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #1a5eff;
    margin-bottom: 12px;
  }

  .ant-calendar-picker {
    width: 100%;
  }
}
</style>
